<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">课程设计任务</el-breadcrumb-item>
            <el-breadcrumb-item>课程设计任务详情</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">任务详情</h2>

        <!-- 主要内容 -->
        <div style="margin: 3% 2% 3% 2%; border: 1px solid #e0e0e0; border-radius: 5px;position: relative;">
            <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">基本信息</h1>
            <div style="display: flex; justify-content: center;text-align: center; width: 100%;">
                <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                    <el-form-item label="班级" size="large">
                        <el-input v-model="taskInfo.className" readonly="true" />
                    </el-form-item>
                    <el-form-item label="任务数" size="large">
                        <el-input v-model="taskInfo.memberMax" readonly="true" />
                    </el-form-item>
                    <el-form-item label="开始时间" size="large">
                        <el-input v-model="taskInfo.startDate" readonly="true" />
                    </el-form-item>
                    <el-form-item label="结束时间" size="large">
                        <el-input v-model="taskInfo.endDate" readonly="true" />
                    </el-form-item>
                    <el-form-item label="评分标准" size="large">
                        <el-input v-model="taskInfo.scaleRule" readonly="true" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>

            <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">任务详情</h1>
            <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;"
                v-for="(item, index) in taskDetail" :key="index">
                <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                    <el-form-item label="子任务题目" size="large">
                        <el-input v-model="item.taskName" readonly="true" />
                    </el-form-item>
                    <el-form-item label="子任务描述" size="large">
                        <el-input v-model="item.content" readonly="true" type="textarea" :autosize="true"/>
                    </el-form-item>
                </el-form>
            </div>

            <el-row :gutter="20">
                <el-col :span="6" :offset="18">
                    <el-button size="large" @click="$router.push('allCourseTask')" style="margin-bottom: 5%;">返回</el-button>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script setup>
import { ref, onBeforeMount,computed } from 'vue';
import requests from '@/api/ajax'
import { useRouter, useRoute } from 'vue-router'


const route = useRoute();

onBeforeMount(() => {
    // const id = $router.params.practicalId
    // if(id === 1)
    // {
    //     alert('成功')
    // }
    const Id = route.query.practicalId

    const asd = requests({ url: "/inner/taskbaseVo/" + Id, method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        const abc = res.rdata
        taskDetail.value = abc
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });


})

const taskInfo = ref({
    className: '',
    memberMax: '',
    scaleRule: "",
    startDate: "",
    endDate: "",
})

const taskDetail = ref([
    {
        taskId: '',
        taskName: "",
        content: "",
        taskType: "",
        publishId: '',
        startDate: "",
        endDate: "",
        scaleRule: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: "",
        practicalType: '',
        onloadDate: ""
    },
])

taskInfo.value.className = computed(() => taskDetail.value[0].className)
taskInfo.value.scaleRule = computed(() => taskDetail.value[0].scaleRule)
taskInfo.value.memberMax = computed(()=> taskDetail.value.length)

const startStr =computed(() => taskDetail.value[0].startDate);
taskInfo.value.startDate = computed(()=>startStr.value.substring(0, 10));

const endStr =computed(() => taskDetail.value[0].endDate);
taskInfo.value.endDate = computed(()=>endStr.value.substring(0, 10));


</script>